<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表角色信息表</title>
    <meta name="keywords" content="列表角色信息表">
    <meta name="description" content="列表角色信息表">
    <link rel="shortcut icon" href="/web/favicon.ico">
    <link href="/web/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="/web/css/font-awesome.min.css" rel="stylesheet"/>
    <!-- bootstrap-table 表格插件样式 -->
    <link href="/web/ajax/libs/bootstrap-table/bootstrap-table.min.css?v=20210202" rel="stylesheet"/>
    <link href="/web/css/animate.min.css" rel="stylesheet"/>
    <link href="/web/css/style.css?v=20200903" rel="stylesheet"/>
    <link href="/web/andy/css/ry-ui.css?v=4.6.1" rel="stylesheet"/>
    <a id="scroll-up" href="javascript:void(0);" class="btn btn-sm display"><i class="fa fa-angle-double-up"></i></a>
    <script src="/web/js/jquery.min.js"></script>
    <script src="/web/js/bootstrap.min.js"></script>
    <!-- bootstrap-table 表格插件 -->
    <script src="/web/ajax/libs/bootstrap-table/bootstrap-table.min.js"></script>
    <script src="/web/ajax/libs/bootstrap-table/locale/bootstrap-table-zh-CN.min.js?v=20210202"></script>
    <script src="/web/ajax/libs/bootstrap-table/extensions/mobile/bootstrap-table-mobile.js"></script>
    <!-- jquery-validate 表单验证插件 -->
    <script src="/web/ajax/libs/validate/jquery.validate.min.js"></script>
    <script src="/web/ajax/libs/validate/messages_zh.min.js"></script>
    <script src="/web/ajax/libs/validate/jquery.validate.extend.js"></script>
    <!-- jquery-validate 表单树插件 -->
    <script src="/web/ajax/libs/bootstrap-treetable/bootstrap-treetable.js"></script>
    <!-- 遮罩层 -->
    <script src="/web/ajax/libs/blockUI/jquery.blockUI.js"></script>
    <script src="/web/ajax/libs/iCheck/icheck.min.js"></script>
    <script src="/web/ajax/libs/layer/layer.min.js"></script>
    <script src="/web/ajax/libs/layui/layui.js"></script>
    <script src="/web/andy/js/common.js?v=4.6.1"></script>
    <script src="/web/andy/js/andy-ui.js?v=4.6.1"></script>
    <script src="/webjars/vue/2.6.14/vue.min.js"></script>
    <link href="/web/ajax/libs/jquery-ztree/3.5/css/metro/zTreeStyle.css" rel="stylesheet"/>
    <script src="/web/ajax/libs/jquery-ztree/3.5/js/jquery.ztree.all-3.5.js"></script>
</head>
<body class="gray-bg" >
<div id="container">
    <div class="container-div" >
        <div class="row">
            <div class="col-sm-12 search-collapse">
                <form id="query">
                    <div class="select-list">
                        <ul>
                            <li>
                                角色名称：<input type="text" name="roleName" value="" v-model="param.roleName"/>
                            </li>
                            <li>
                                状态：
                                <select  name="status" v-model="param.status">
                                    <option value="-1">全部</option>
                                    <option value="0">启用</option>
                                    <option value="1">禁用</option>
                                </select>
                            </li>
                            </li>
                            <li>
                                <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
                                <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                            </li>
                        </ul>
                    </div>
                </form>
            </div>

            <div class="btn-group-sm" id="toolbar" role="group">
                <a class="btn btn-success" @click="add();">
                    <i class="fa fa-plus"></i> 新增
                </a>
                <a class="btn btn-primary" @click="edit();">
                    <i class="fa fa-edit"></i> 修改
                </a>
                <a class="btn btn-warning" @click="deletes();">
                    <i class="glyphicon glyphicon-trash" aria-hidden="true"></i>删除
                </a>
            </div>
            <div class="col-sm-12 select-table table-striped">
                <table id="bootstrap-table"></table>
            </div>
        </div>
    </div>

    <div class="wrapper wrapper-content animated fadeInRight ibox-content" id="addForm" style="display: none">
        <form class="form-horizontal m" id="form-menu-add">
                <input type="hidden" v-model="entity.roleId"/>
                <div class="form-group">
                    <label class="control-label col-sm-3">
                        角色名称
                    </label>
                    <div class="col-sm-7 " >
                        <input v-model="entity.roleName" type="text"  class="form-control" name="roleName"  placeholder="角色名称">
                    </div>
                </div>

                <div class="form-group">
                    <label class="control-label col-sm-3">
                        角色权限字符串
                    </label>
                    <div class="col-sm-7 " >
                        <input v-model="entity.roleKey" type="text"  class="form-control" name="roleKey"  placeholder="角色权限字符串">
                    </div>
                </div>

                <div class="form-group">
                    <label class="control-label col-sm-3">
                        显示顺序
                    </label>
                    <div class="col-sm-7 " >
                        <input v-model="entity.roleSort" type="text"  class="form-control" name="roleSort"  placeholder="显示顺序">
                    </div>
                </div>

                <div class="form-group">
                    <label class="control-label col-sm-3">
                        数据范围
                    </label>
                    <div class="col-sm-7 " >
                        <select class="form-control" v-model="entity.dataScope">
                            <option value="1">全部数据权限</option>
                            <option value="2">自定数据权限</option>
                            <option value="3">本部门数据权限</option>
                            <option value="4">本部门及以下数据权限</option>

                        </select>
                    </div>
                </div>

                <div class="form-group">
                    <label class="control-label col-sm-3">
                        角色状态
                    </label>
                    <div class="col-sm-7 " >
                        <select name="status" v-model="entity.status"  class="form-control">
                            <option value="0">启用</option>
                            <option value="1">停用</option>
                        </select>
                    </div>
                </div>

                <div class="form-group">
                    <label class="control-label col-sm-3">
                        删除标志
                    </label>
                    <div class="col-sm-7 " >
                        <select name="status" v-model="entity.delFlag"  class="form-control">
                            <option value="0">启用</option>
                            <option value="1">停用</option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-3">
                        备注
                    </label>
                    <div class="col-sm-7 " >
                        <input v-model="entity.remark" type="text"  class="form-control" name="remark"  placeholder="备注">
                    </div>
                </div>
            </form>
    </div>


</div>
<script>
    let index2;
    var roleId;
    let vm = new Vue({
        el:'#container',
        data:{
            datas:[],
            param:{
                visible:'',
                status:'-1'
            },
            entity:{
                dataScope:'1',
                status:'0',
                delFlag:'0'
            }
        },
        methods:{
            edit:function(){
                let rows = $("#bootstrap-table").bootstrapTable('getSelections');
                if ($.common.isEmpty(rows) || rows.length>1) {
                    $.modal.alertWarning("请最多选择一条记录");
                    return;
                }
                $.operate.getNoAlert('/system/role/info/'+rows[0].roleId,function(ret){
                    let data = ret.data;
                    vm.entity=data;
                    $.operate.edit(0,'addForm',doSubmit);
                });

            },
            add:function(){
                vm.entity={};
                $.operate.edit(0,'addForm',doSubmit);
            }
        },
        mounted(){
            init();
        }
    });

    function edit_(id){
        $.operate.getNoAlert('/system/role/info/'+id,function(ret){
            let obj = ret.data;
            vm.entity=obj;
            $.operate.edit(0,'addForm',doSubmit);
        });

    }
    function close() {
        layer.close(index2);
    }
    function selectMenus(r) {
        roleId = r
        index2 = layer.open({
            type: 2,
            area: [ '400px','400px'],
            fix: false,
            //不固定
            maxmin: true,
            shade: 0.3,
            title: '角色设置权限',
            content: '/system/menu/toTree',
            btn: ['确定', '关闭'],
            yes: function(index, layero){
                //按钮【按钮一】的回调
                var iframeWin = window[layero.find('iframe')[0]['name']];//得到iframe页的窗口对象，执行iframe页的方法：
                iframeWin.save();
            }

        });
    }
    function deleteById(id){
        layer.confirm("确定删除当前角色吗？",function(){
            $.operate.delete('/system/role/delete/'+id);
        });
    }
    function deletes(){

        let rows = $("#bootstrap-table").bootstrapTable('getSelections');
        if ($.common.isEmpty(rows) || rows.length<1) {
            $.modal.alertWarning("请至少选择一条记录");
            return;
        }
        let ids=new Array();
        for(let i=0;i<rows.length;i++){
            ids.push(rows[i].roleId);
        }
        alert(JSON.stringify(ids))
        $.operate.deletes('/system/role/delete',{"ids":ids});
    }
    function init(){
        var addFlag = false;
        addFlag=true;
        var editFlag = false;
        addFlag=true;
        var removeFlag = false;
        addFlag=true;
        var datas =[];
        var prefix =  "/system/role";

        let options={
            url:'/system/role/data',
            sortable:false,
            modalName:'角色',
            columns:[
                {
                    checkbox : true,
                    align : 'center'
                },
                {
                    field:'roleName',
                    title:'角色名称',
                    align: 'center',
                    halign: 'center',
                    sortable:true
                },
                {
                    field:'roleKey',
                    title:'角色权限字符串',
                    align: 'center',
                    halign: 'center',
                    sortable:true
                },
                {
                    field:'roleSort',
                    title:'显示顺序',
                    align: 'center',
                    halign: 'center',
                    sortable:true
                },
                {
                    field:'dataScope',
                    title:'数据范围',
                    align: 'center',
                    halign: 'center',
                    sortable:true,
                    visible:false
                },
                {
                    field:'status',
                    title:'角色状态',
                    align: 'center',
                    halign: 'center',
                    sortable:true,
                    formatter:function(value, row, index){
                        if(value==0){
                          return "<span class=\"label label-success\">启用</span>";
                        }else{
                            return "<span class=\"label label-danger\">禁用</span>";
                        }

                    }
                },
                {
                    field:'createBy',
                    title:'创建者',
                    align: 'center',
                    halign: 'center',
                    sortable:true
                },
                {
                    field:'createTime',
                    title:'创建时间',
                    align: 'center',
                    halign: 'center',
                    visible: false,
                    sortable:true
                },
                {
                    field:'updateBy',
                    title:'更新者',
                    align: 'center',
                    halign: 'center',
                    visible: false,
                    sortable:true
                },
                {
                    field:'updateTime',
                    title:'更新时间',
                    align: 'center',
                    halign: 'center',
                    visible: false,
                    sortable:true
                },
                {
                    field:'remark',
                    title:'备注',
                    align: 'center',
                    halign: 'center',
                    visible: false,
                    sortable:true
                },
                {
                    title:'操作',
                    width:100,
                    align: 'center',
                    halign: 'center',
                    formatter:function (value,row,index){
                        let actions=[];
                        actions.push("<a href='javascript:void(0)' onclick=\"edit_('"+row.roleId+"')\" title=\"点击编辑角色信息表\"><i class=\"glyphicon glyphicon-edit\" aria-hidden=\"true\"></i></a>&nbsp;&nbsp;");
                        actions.push("<a href='javascript:void(0)' onclick=\"selectMenus('"+row.roleId+"')\" title=\"角色授权\"><i class=\"glyphicon glyphicon-th-large\" aria-hidden=\"true\"></i></a>&nbsp;&nbsp;");
                        actions.push("<a href='javascript:void(0)' title='点击删除角色信息表' onclick=\"deleteById('"+row.roleId+"')\"><i class=\"glyphicon glyphicon-trash\" aria-hidden=\"true\"></i></a>&nbsp;&nbsp;");

                        return actions.join("");
                    }
                }
            ]
        }
        $.table.init(options);
    }


    function doSubmit(){
        $.operate.post("/system/role/save",JSON.stringify(vm.entity),function(ret){
            layer.closeAll();
        });
    }

</script>
</body>
</html>